<template>
  <div class="add-task">
    <!-- v-model="newTask" 是 Vue 中实现双向数据绑定的核心指令 -->
    <!-- 作用是将输入框的内容与组件内的响应式变量 newTask 关联起来，实现双向同步更新效果 -->
    <input class="add-input" type="text" placeholder="输入新任务..." v-model="newTask">
    <button class="add-btn" @click="handleAddTask">添加</button>
  </div>
</template>

<!-- setup 是 Vue 3 组合式 API 的核心入口 -->
<!-- lang="ts" 表示脚本使用 TypeScript 编写 -->
<script setup lang="ts">
import { ref } from 'vue';

//①定义组件 emits 类型
//  emit 函数，该函数用于实际触发事件
//      =>即父组件里面<TaskInput @add-task="addTask" /> 里的 @add-task，参数1是第一个，参数2是调用父组件事件所需要的参数
const emit = defineEmits<{
  (e: 'add-task', taskText: string): void;
}>();

//②绑定输入框的值
// newTask 是通过 ref('') 定义的响应式变量，用于存储用户输入的任务文本
const newTask = ref('');

//③处理添加任务
const handleAddTask = () => {
  console.log(newTask);

  const taskText = newTask.value.trim();
  if (taskText) {
    emit('add-task', taskText);
    newTask.value = '';
  }
};
</script>


<!-- scoped 表示样式仅作用于当前组件 -->
<style scoped>
.add-task {
  display: flex;
  margin-bottom: 20px;
}

.add-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.add-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  margin-left: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #2980b9;
}
</style>